<template>
  <div class="orders-container">
    <!-- 面包屑导航 -->
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/welcome' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>订单管理</el-breadcrumb-item>
      <el-breadcrumb-item>订单列表</el-breadcrumb-item>
    </el-breadcrumb>

    <!-- 列表区域 -->
    <div class="list">
      <!-- 搜索框 -->
      <div class="search">
        <el-input placeholder="请输入搜索项" v-model.trim="input">
          <el-button slot="append" icon="el-icon-search" @click="searchOrder(input)"></el-button>
        </el-input>
      </div>
      <!-- 表格区域 -->
      <el-table v-loading="loading" stripe :data="tableList" border style="width: 100%">
        <el-table-column type="index" min-width="50px" label="#"></el-table-column>
        <el-table-column prop="order_number" min-width="250px" label="订单编号"></el-table-column>
        <el-table-column prop="order_price" label="订单价格"></el-table-column>
        <el-table-column prop="pay_status" label="是否付款">
          <template slot-scope="scope">
             <el-tag v-if="scope.row.pay_status == '0'" type="danger">未付款</el-tag>
             <el-tag v-if="scope.row.pay_status == '1'" type="success">已付款</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="is_send" label="是否发货"></el-table-column>
        <el-table-column prop="create_time" label="下单时间">
          <template slot-scope="scope">
             {{ date(scope.row.create_time) }}
          </template>
        </el-table-column>
        <el-table-column prop="order_number" label="操作"></el-table-column>
      </el-table>

      <!-- 分页 -->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[5, 10, 20, 40]"
        :page-size="100"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
      </el-pagination>
    </div>
  </div>
</template>

<script>
import { dateformat } from '@/utils/date.js'
import { getOrdersList } from '@/api/orders.js'
export default {
  name: 'Orders',
  data () {
    return {
      input: '', // 输入框
      tableList: [], // 订单列表数据
      pagenum: 1, // 默认展示页码
      pagesize: 5, // 默认每页显示条数
      currentPage: 1, // 当前分页展示页
      total: 0, // 订单总数
      loading: false // 加载中
    }
  },

  created () {
    // 获取订单列表
    this.loadOrdersList()
  },

  methods: {
    // 封装获取订单列表
    async loadOrdersList () {
      // 获取订单发送请求前显示加载中
      this.loading = true
      try {
        const { data: res } = await getOrdersList({
          is_send: this.input,
          pagenum: this.pagenum,
          pagesize: this.pagesize
        })
        // 手动错误
        // if (Math.random() < 0.2) {
        //   console.lg(1)
        // }
        if (res.meta.status !== 200) this.$message.error(res.meta.msg)
        // 保存数据
        this.tableList = res.data.goods
        this.total = res.data.total
        // 数据请求回来后关闭loading
        this.loading = false
      } catch (err) {
        this.$message.error('获取订单列表失败')
      }
    },
    // 点击搜索
    searchOrder () {
      console.log(this.input)
      // 拿到输入框的值 发送请求获取订单列表 渲染页面
      this.loadOrdersList()
    },

    // 每页条数改变时会触发
    handleSizeChange (val) {
      this.pagesize = val
      this.loadOrdersList()
    },
    // 当前页改变时会触发
    handleCurrentChange (val) {
      // 拿到当前页 赋值给当前页数 发送请求 获取数据 渲染页面
      this.pagenum = val
      this.loadOrdersList()
    },
    // 处理时间戳方法
    date (val) {
      return dateformat(val)
    }
  }
}
</script>

<style lang="less" scoped>
.orders-container {
  padding: 15px;
  // 面包屑导航
  .el-breadcrumb {
    margin-top: 0;
    margin-bottom: 15px;
  }
  // 列表区域
  .list {
    background-color: #FAFAFA;
    padding: 15px;
    border-radius: 5px;
    // 搜索框
    .search {
      width: 33%;
    }
    // 表格区域
    /deep/.el-table .cell {
      font-size: 12px;
      div {
        font-size: 12px;
      }
    }
  }
}
</style>
